<template>
    <div class="display-content">
        <div class="header">
            <h1 class="title">风 险 驾 驶 舱</h1>

            <!-- <img src="./images/title.png" alt="" class="imgStyle" /> -->
        </div>
        <div class="content">
            <el-row class="row1">
                <el-col :span="6">
                    <el-card class="box-card" id="fundPie">
                        <div class="text">
                            <div class="imgStyle pieImg"></div>
                            <span style="">产品分布</span>
                            <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                                <i class="el-icon-refresh-right icon" @click="handleRefresh('1')"></i>
                            </el-tooltip>
                        </div>
                        <span class="blue-font">总数量<br />{{ thousandsFormat(totalAmount) + '只' }}</span>
                        <PieChart style="height: calc(100% - 42px);position: absolute;width:287px" ref="PieChart" :data="fundDistributionData">
                        </PieChart>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card">
                        <div class="text">
                            <div class="imgStyle pieImg"></div>
                            <span>触警分布</span>
                            <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                                <i class="el-icon-refresh-right icon" @click="handleRefresh('2')"></i>
                            </el-tooltip>
                        </div>
                        <PiesChart style="display: flex; height: calc(100% - 50px)" ref="PiesChart" :data="thresholdData" />

                        <div style="display:flex">
                            <div class="alertPieTitle">
                                {{ '总条目数：' + (entryTotal && warningTotal.value !== undefined ? thousandsFormat(entryTotal.value) : '--') }}
                            </div>
                            <div class="alertPieTitle">
                                {{ '警告总数：' + (warningTotal && warningTotal.value !== undefined ? thousandsFormat(warningTotal.value) : '--') }}
                            </div>
                            <div class="alertPieTitle">
                                {{ '送审总数：' + (examineTotal && examineTotal.value !== undefined ? thousandsFormat(examineTotal.value) : '--') }}
                            </div>
                            <div class="alertPieTitle">
                                {{
                                    '禁止总数：' + (prohibitTotal && prohibitTotal.value !== undefined ? thousandsFormat(prohibitTotal.value) : '--')
                                }}
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6" class="staticCalcPie-col">
                    <el-card class="box-card" id="staticCalcPie">
                        <div class="text">
                            <div class="imgStyle pieImg"></div>
                            <span>静态计算分布</span>
                            <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                                <i class="el-icon-refresh-right icon" @click="handleRefresh('3')"></i>
                            </el-tooltip>
                        </div>
                        <CirqueChart ref="CirqueChart" style="height: calc(100% - 43px)" :data="staticDistributionData" />
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="row2">
                <el-col :span="6">
                    <el-card class="box-card" style="height: 100%">
                        <div class="text">
                            <div class="imgStyle pieImg"></div>
                            <span>指令分布</span>
                            <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                                <i class="el-icon-refresh-right icon" @click="handleRefresh('4')"></i>
                            </el-tooltip>
                        </div>
                        <div class="blue-box">
                            <span class="blue-font">总金额<br />{{ thousandsFormat(totalBalance) }}</span>
                            <div class="faker-border"></div>
                            <span class="blue-font" style="padding-right:9px">总笔数<br />{{ thousandsFormat(totalInst) + '笔' }}</span>
                        </div>
                        <div style="height: calc(100% - 42px);position: absolute;width:287px">
                            <PieChart style="height: 50%" ref="instPie1" :data="instDistributionData"> </PieChart>
                            <PieChart style="height: 50%" ref="instPie2" :data="instDistributionByFundData"> </PieChart>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card" style="min-height: 400px">
                        <div class="text">
                            <div class="imgStyle dashboardImg"></div>
                            <span>实时监控</span>
                            <div class="subText-box">
                                <span class="subText">监控状态：{{ MonitorState[monitorState] || '--' }}</span>
                                <span class="subText" v-if="monitorState == '1'">开始时间：{{ startTime || '--' }}</span>
                                <span class="subText" v-else>结束时间：{{ endTime || '--' }}</span>
                                <!-- <span class="subText"
                                    >耗时：<span id="fake-time" class="subText" style="padding:0" v-show="monitorState == '0'"></span>
                                    <span class="subText" style="padding:0" v-show="monitorState == '1'"> {{ totalTime }}</span> 秒</span
                                > -->
                                <!-- <span class="subText">耗时：{{ totalTime }}秒</span> -->
                            </div>
                            <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                                <i class="el-icon-refresh-right icon" @click="handleRefresh('5')"></i>
                            </el-tooltip>
                        </div>
                        <div id="monitorTop" style="display: flex; height: calc(40% - 21px); padding:0 30px">
                            <div id="fake-box1">
                                <span id="fake-num1" v-show="!hiddenFakeSpan"></span>
                                <span id="fake-num1-p" v-show="!hiddenFakeSpan"></span>
                            </div>
                            <div id="fake-box2">
                                <span id="fake-num2" v-show="!hiddenFakeSpan"></span>
                                <span id="fake-num2-p" v-show="!hiddenFakeSpan"></span>
                            </div>
                            <div id="fake-box3">
                                <span id="fake-num3" v-show="!hiddenFakeSpan"></span>
                                <span id="fake-num3-p" v-show="!hiddenFakeSpan"></span>
                            </div>

                            <div id="monitorTop1" style="height: 100%;width: 33.3%;padding:10px"></div>
                            <div id="monitorTop2" style="height: 100%;width: 33.3%;padding:10px"></div>
                            <div id="monitorTop3" style="height: 100%;width: 33.3%;padding:10px"></div>
                        </div>
                        <div id="monitorBottom" style="height: calc(60% - 54px); z-index: 11112;margin-top:-10px">
                            <SolidBarChart ref="SolidBarChart" :data="realTimeMonitorBarData" :thresholdTotal="thresholdTotal" @disFresh="disFresh" />
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6" class="staticCalcPie-col">
                    <el-card class="box-card" style="min-height: 400px" id="continuousPie">
                        <div class="text">
                            <div class="imgStyle pieImg"></div>
                            <span>连续触警汇总</span>
                            <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                                <i class="el-icon-refresh-right icon" @click="handleRefresh('6')"></i>
                            </el-tooltip>
                        </div>
                        <div style="height: calc(50% - 25px);">
                            <CirqueChart ref="CirqueChart1" :data="continuousTriggerWarningData" />
                        </div>
                        <div class="text" style="margin-top:-10px;padding-top:0">
                            <div class="imgStyle pieImg"></div>
                            <span>连续违规汇总</span>
                            <!-- <i class="el-icon-refresh-right icon" @click="handleRefresh('7')"></i> -->
                        </div>
                        <div style="height: calc(50% - 25px);">
                            <CirqueChart ref="CirqueChart2" :data="continuousBreakRuleData" />
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="row1">
                <el-col :span="6">
                    <el-card class="box-card" v-loading="tableLoading">
                        <div class="text">
                            <div class="imgStyle messageImg"></div>
                            <span>旁路动态信息</span>
                            <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                                <i class="el-icon-refresh-right icon" @click="handleRefresh('8')"></i>
                            </el-tooltip>
                        </div>
                        <RiskTable style="height: calc(100% - 40px);padding: 0 10px" border :msg="bypassMsg" />
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card" id="alertTrend">
                        <div class="text">
                            <div class="imgStyle lineImg"></div>
                            <span>实时触警走势</span>
                            <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                                <i class="el-icon-refresh-right icon" @click="handleRefresh('9')"></i>
                            </el-tooltip>
                        </div>
                        <LineChart ref="LineChart" :data="realTimeThresholdData" />
                    </el-card>
                </el-col>
                <el-col :span="6" class="staticCalcPie-col">
                    <el-card class="box-card" id="alertGroup">
                        <div class="text">
                            <div class="imgStyle barImg" style="display: inline-block;height: 20px;width: 20px; margin-right: 5px;"></div>
                            <span>静态触警分组</span>
                            <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                                <i class="el-icon-refresh-right icon" @click="handleRefresh('10')"></i>
                            </el-tooltip>
                        </div>
                        <BarChart ref="BarChart" :data="staticGradeGroupData" />
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import RiskTable from '@/common/components/risk-table.vue';
import PieChart from './components/pie-chart.vue';
import SolidBarChart from './components/solid-bar-chart.vue';
import CirqueChart from './components/cirque-chart.vue';
import DashboardChart from './components/dash-board-chart.vue';
import LineChart from './components/line-chart.vue';
import BarChart from './components/bar-chart.vue';
import {
    getBypass,
    getContinuousBreakRule,
    getContinuousTriggerWarning,
    getFundDistribution,
    getInstDistributionFundType,
    getInstDistributionType,
    getRealTimeMonitor,
    getRealTimeThreshold,
    getStaticDistribution,
    getStaticGradeGroup,
    getThresholdDistribution,
} from './api/monitor-display';
import { dateFormat, thousandsFormat, timeFormat, NumAutoPlusAnimation, NumAutoPlusAnimation2 } from '@/utils/tools';
import moment from 'moment';
import PiesChart from './components/pies-chart.vue';
import DictionConstUtil from '@/utils/diction-const-util';

type EChartsOption = echarts.EChartsOption;
@Component({
    name: 'MonitorDisplay',
    components: {
        RiskTable,
        PieChart,
        SolidBarChart,
        CirqueChart,
        DashboardChart,
        LineChart,
        BarChart,
        PiesChart,
    },
})
export default class MonitorDisplay extends Vue {
    thousandsFormat = thousandsFormat;
    MonitorState = {
        '0': '已完成',
        '1': '计算中',
    };
    disFreshType: boolean = false;
    // 产品分布图数据
    fundDistributionData: any = {
        data: [],
        showLegend: true,
        tooltip: {
            formatter: function(param) {
                return param.marker + '&nbsp' + param.name + '&nbsp' + (thousandsFormat(param.value) || '0') + '只';
            },
        },
        color: ['#5FB2FF', '#73E0FF', '#96A0FF', '#F47B8F'],
    };
    totalAmount: string = ''; // 产品分布--总数量
    // 指令分布图数据--指令类型
    instDistributionData: any = {
        data: [],
        showLegend: true,
        color: ['#5FB2FF', '#73E0FF', '#69FFED', '#96A0FF', '#F47B8F'],
    };
    // 指令分布图数据--产品类型
    instDistributionByFundData: any = {
        data: [],
        showLegend: true,
        color: ['#5FB2FF', '#73E0FF', '#96A0FF', '#F47B8F'],
    };
    // 静态计算分布
    staticDistributionData: any = {
        data: [],
        showLegend: true,
        // color: ['#60b2fd', '#68ffec', '#f37b8e'],
        color: ['#fee675', '#5fb2ff', '#f37b8e'],
    };
    // 连续违规数据
    continuousBreakRuleData: any = {
        data: [],
        showLegend: true,
        color: ['#5FB2FF', '#73E0FF', '#69FFED', '#96A0FF', '#F47B8F'],
    };
    // 连续触警数据
    continuousTriggerWarningData: any = {
        data: [],
        showLegend: true,
        color: ['#5FB2FF', '#73E0FF', '#69FFED', '#96A0FF', '#F47B8F'],
    };
    // 实时触警走势
    realTimeThresholdData: any = {
        data: [],
        xAxisData: [],
    };
    // 静态触警分组
    staticGradeGroupData: any = {
        data: [],
        xAxisData: [],
    };

    monitorState: string = ''; // 监控状态
    startTime: string = ''; // 开始时间
    endTime: string = ''; // 结束时间
    totalTime: number = null; // 耗时
    nowTime: string = ''; // 当前时间

    // 实时监控柱状图数据
    realTimeMonitorBarData: any = {
        data: [],
        xAxisData: [],
    };
    examineTotalAmount: string = '';
    warningTotalAmount: string = '';
    prohibitTotalAmount: string = '';

    // 实时监控--禁止饼图
    forbidPieData: any = {
        data: {},
    };

    // 实时监控--送审饼图
    examinePieData: any = {
        data: {},
    };

    // 实时监控--警告饼图
    warningPieData: any = {
        data: {},
    };
    // 触警分布
    thresholdData: any = {
        data: [],
        showLegend: true,
        legendDirection: 'horizontal',
    };
    // 触警分布--总条目数
    thresholdAll: any = {
        data: [
            { value: 0, name: '法律法规' },
            { value: 0, name: '公司规定' },
            { value: 0, name: '契约规定' },
            { value: 0, name: '其他规定' },
        ],
    };
    entryTotal: any = {}; // 条目总数

    // 触警分布--禁止总数
    thresholdForbid: any = {
        data: [
            // { value: 0, name: '法律法规' },
            // { value: 0, name: '公司规定' },
            // { value: 0, name: '契约规定' },
            // { value: 0, name: '其他规定' },
        ],
    };
    prohibitTotal: any = {}; // 禁止总数

    // 触警分布--警告总数
    thresholdWarning: any = {
        data: [],
    };
    warningTotal: any = {}; // 警告总数

    // 触警分布--送审总数
    thresholdUnderReview: any = {
        data: [],
    };
    examineTotal: any = {}; // 送审总数

    hiddenFakeSpan: boolean = false;

    // 旁路动态信息
    bypassMsg = {
        returnData: {
            data: [],

            // total: 0,
        },
        dataKey: 'data',
        title: [
            { name: '内容', val: 'content', minWidth: 195, type: 'func', funcBody: value => value || '--' },
            { name: '时间', val: 'time', minWidth: 54, type: 'func', funcBody: value => timeFormat(value) || '--' },
        ],
        height: '100%',
        hidePage: true,
        checked: { on: false, option: false },
    };

    chartDomMonitor: HTMLElement;
    myChartMonitor: any;
    fakeAnimation: any;
    fakeAnimation2: any;
    // 实时监控
    monitorOption1: any = {
        animation: true, // 是否开启动画
        animationDuration: 2000, // 初始动画的时长
        animationDurationUpdate: 2000, // 数据更新动画的时长
        animationEasingUpdate: 'quadraticIn', // 数据更新动画的缓动效果
        backgroundColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
                {
                    offset: 0,
                    color: '#b8e9ff', // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#e7f2ff', // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'white', // 100% 处的颜色
                },
            ],
            globalCoord: false, // 缺省为 false
        },
        title: {
            show: true,
            x: 'center',
            y: '70%',
            text: '送审',
            textStyle: {
                fontSize: 13,
                fontWeight: '700',
                fontStyle: 'normal',
                color: 'rgba(0,0,0,0.65)',
            },
        },
        series: [
            // 蓝色
            {
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中
                radius: '70px',
                startAngle: 225,
                endAngle: -45,
                roundCap: true,
                axisLine: {
                    show: true,
                    roundCap: true,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            // 表盘颜色
                            [0.1, '#0f7ffd'],
                            [
                                0.5,
                                new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#0f7ffd',
                                    },
                                    {
                                        offset: 1,
                                        color: '#1bc9fe',
                                    },
                                ]),
                            ],
                            [
                                1,
                                new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#0f7ffd',
                                    },
                                    {
                                        offset: 1,
                                        color: '#1bc9fe',
                                    },
                                ]),
                            ],
                        ],
                        width: 10, // 表盘宽度
                    },
                },
                progress: {
                    show: true,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                detail: {
                    show: false,
                },
            },
            {
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中
                radius: '50px',
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                    show: true,
                    roundCap: true,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            [1, '#dff1ff'], // 90%-100%处的颜色
                        ],
                        width: 30, // 表盘宽度
                    },
                },
                splitLine: {
                    distance: -10,
                    // 分割线样式（及10、20等长线样式）
                    length: 7,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#47c5fd',
                    },
                },
                progress: {
                    show: true,
                    roundCap: true,
                },
                axisTick: {
                    splitNumber: 8,
                    distance: -10,
                    // 刻度线样式（及短线样式）
                    length: 7,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#47c5fd',
                    },
                },
                axisLabel: {
                    // 文字样式（及“10”、“20”等文字样式）
                    // distance: 0 //文字离表盘的距离
                    show: false,
                },
                detail: { show: false },
            },
            {
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中
                radius: '40px',
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                    show: true,
                    roundCap: true,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            // 表盘颜色

                            [1, '#47c5fd'], // 90%-100%处的颜色
                        ],
                        width: 2, // 表盘宽度
                    },
                },
                progress: {
                    show: true,
                    roundCap: true,
                },
                splitLine: {
                    distance: 15,
                    // 分割线样式（及10、20等长线样式）
                    length: 10,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#47c5fd',
                    },
                },
                axisTick: {
                    splitNumber: 4,
                    distance: 15,
                    // 刻度线样式（及短线样式）
                    length: 5,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#47c5fd',
                    },
                },
                axisLabel: {
                    // 文字样式（及“10”、“20”等文字样式）
                    color: 'rgba(0,0,0,.65)',
                    fontSize: 7,
                    distance: 3, // 文字离表盘的距离
                    // show: false
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                        borderWidth: 10,
                    },
                },

                pointer: {
                    width: 3, // 指针的宽度
                    length: '50%', // 指针长度，按照半圆半径的百分比
                    shadowColor: '#18CCFF', // 默认透明
                    shadowBlur: 30,
                    itemStyle: {
                        color: '#18CCFF',
                    },
                },
                itemStyle: {
                    // 渐变颜色
                    color: new echarts.graphic.LinearGradient(1, 1, 0, 1, [
                        {
                            offset: 1,
                            color: '#1bc9fe',
                        },
                        {
                            offset: 0,
                            color: '#0f7ffd',
                        },
                    ]),
                    shadowColor: '#ffc3c7', // 默认透明
                    shadowBlur: 30,
                },
                title: {
                    offsetCenter: [0, '70%'],
                    fontSize: 16,
                },
                detail: {
                    // formatter: function(value) {
                    //     return this.examineTotalAmount + '(' + value + '%)';
                    // },
                    formatter: function(value) {
                        return '(' + value + '%)';
                    },
                    offsetCenter: [0, '145%'],
                    height: 5,
                    color: 'rgba(0,0,0,.65)',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
                markPoint: {
                    // symbol:'circle',
                    // symbolSize:15,
                    // itemStyle: {
                    //     color: "#fff"
                    // },
                    data: [
                        {
                            x: '50%',
                            y: '50%',
                            symbol: 'circle',
                            symbolSize: 12,
                            itemStyle: {
                                color: ' #18CCFF',
                            },
                        },
                        {
                            x: '50%',
                            y: '50%',
                            symbol: 'circle',
                            symbolSize: 8,
                            itemStyle: {
                                color: '#fff',
                            },
                        },
                    ],
                },
                data: [
                    {
                        value: 0,
                        // name: '送审',
                        itemStyle: {
                            color: '#18CCFF',
                        },
                    },
                ],
            },
        ],
    };
    thresholdTotal: any = 0;
    monitorOption2: any = {
        animation: true, // 是否开启动画
        animationDuration: 2000, // 初始动画的时长
        animationDurationUpdate: 2000, // 数据更新动画的时长
        animationEasingUpdate: 'quadraticIn', // 数据更新动画的缓动效果
        backgroundColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
                {
                    offset: 0,
                    color: '#fff5c5', // 0% 处的颜色
                },
                {
                    offset: 1,
                    // color: 'red', // 0% 处的颜色
                    color: '#fffceb', // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'white', // 100% 处的颜色
                },
            ],
            globalCoord: false, // 缺省为 false
        },
        title: {
            show: true,
            x: 'center',
            y: '70%',
            text: '警告',
            textStyle: {
                fontSize: 13,
                fontWeight: '700',
                fontStyle: 'normal',
                color: 'rgba(0,0,0,0.65)',
            },
        },
        series: [
            // 黄色
            {
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中
                radius: '70px',
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            // 表盘颜色
                            [0.1, '#ff730a'],
                            [
                                0.5,
                                new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#ff730a',
                                    },
                                    {
                                        offset: 1,

                                        color: '#f8e478',
                                    },
                                ]),
                            ],
                            // [0.7, '#fd5655'],
                            [
                                1,
                                new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#ff730a',
                                    },
                                    {
                                        offset: 1,
                                        color: '#f8e478',
                                    },
                                ]),
                            ],
                        ],
                        width: 10, // 表盘宽度
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                detail: {
                    show: false,
                },
            },
            {
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中
                radius: '50px',
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                    show: true,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            [1, 'white'], // 90%-100%处的颜色
                        ],
                        width: 30, // 表盘宽度
                        opacity: 0.5,
                    },
                },
                splitLine: {
                    distance: -10,
                    // 分割线样式（及10、20等长线样式）
                    length: 7,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#f8e478',
                    },
                },
                axisTick: {
                    splitNumber: 8,
                    distance: -10,
                    // 刻度线样式（及短线样式）
                    length: 7,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#f8e478',
                    },
                },
                axisLabel: {
                    show: false,
                },
                detail: {
                    show: false,
                },
            },
            {
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中
                radius: '40px',
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                    show: true,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            [1, '#f8e478'], // 90%-100%处的颜色
                        ],
                        width: 2, // 表盘宽度
                    },
                },
                splitLine: {
                    distance: 15,
                    // 分割线样式（及10、20等长线样式）
                    length: 10,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#f8e478',
                    },
                },
                axisTick: {
                    splitNumber: 4,
                    distance: 15,
                    // 刻度线样式（及短线样式）
                    length: 5,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#f8e478',
                    },
                },
                axisLabel: {
                    // 文字样式（及“10”、“20”等文字样式）
                    color: 'rgba(0,0,0,.65)',
                    fontSize: 7,
                    distance: 3, // 文字离表盘的距离
                    // show: false
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                        borderWidth: 10,
                    },
                },
                pointer: {
                    width: 3, // 指针的宽度
                    length: '50%', // 指针长度，按照半圆半径的百分比
                    shadowColor: '#FFE773', // 默认透明
                    shadowBlur: 30,
                    itemStyle: {
                        color: '#FFE773',
                    },
                },

                itemStyle: {
                    // 渐变颜色
                    color: new echarts.graphic.LinearGradient(1, 1, 0, 1, [
                        {
                            offset: 1,
                            color: '#f8e478',
                        },
                        {
                            offset: 0,
                            color: '#ff730a',
                        },
                    ]),
                    shadowColor: '#ffc3c7', // 默认透明
                    shadowBlur: 30,
                },
                title: {
                    offsetCenter: [0, '70%'],
                    fontSize: 16,
                },
                detail: {
                    // formatter: function(value) {
                    //     return this.warningTotalAmount + '(' + value + '%)';
                    // },
                    formatter: function(value) {
                        return '(' + value + '%)';
                    },
                    offsetCenter: [0, '145%'],
                    // backgroundColor: '#FFEC45', // 文字部分背景颜色
                    height: 5,
                    color: 'rgba(0,0,0,.65)',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
                markPoint: {
                    // symbol:'circle',
                    // symbolSize:15,
                    // itemStyle: {
                    //     color: "#fff"
                    // },
                    data: [
                        {
                            x: '50%',
                            y: '50%',
                            symbol: 'circle',
                            symbolSize: 12,
                            itemStyle: {
                                color: ' #FFE773',
                            },
                        },
                        {
                            x: '50%',
                            y: '50%',
                            symbol: 'circle',
                            symbolSize: 8,
                            itemStyle: {
                                color: '#fff',
                            },
                        },
                    ],
                },
                data: [
                    {
                        value: 0,
                        // name: '禁止',
                        itemStyle: {
                            color: '#FFE773',
                        },
                    },
                ],
            },
        ],
    };
    monitorOption3: any = {
        animation: true, // 是否开启动画
        animationDuration: 2000, // 初始动画的时长
        animationDurationUpdate: 2000, // 数据更新动画的时长
        animationEasingUpdate: 'quadraticIn', // 数据更新动画的缓动效果
        backgroundColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
                {
                    offset: 0,
                    color: '#ffc4c7', // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#fff2f6', // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'white', // 100% 处的颜色
                },
            ],
            globalCoord: false, // 缺省为 false
        },
        title: {
            show: true,
            x: 'center',
            y: '70%',
            text: '禁止',
            textStyle: {
                fontSize: 13,
                fontWeight: '700',
                fontStyle: 'normal',
                color: 'rgba(0,0,0,0.65)',
            },
        },
        series: [
            {
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中
                radius: '70px',
                startAngle: 225,
                endAngle: -45,
                backgroundColor: new echarts.graphic.LinearGradient(1, 1, 0, 1, [
                    {
                        offset: 1,
                        color: '#1bc9fe',
                    },
                    {
                        offset: 0,
                        color: '#0f7ffd',
                    },
                ]),
                axisLine: {
                    show: true,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            // 表盘颜色
                            [0.1, '#d80201'],
                            [
                                0.5,
                                new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#d80201',
                                    },
                                    {
                                        offset: 1,
                                        color: '#fd5756',
                                    },
                                ]),
                            ],
                            // [0.7, '#fd5655'],
                            [
                                1,
                                new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#d80201',
                                    },
                                    {
                                        offset: 1,
                                        color: '#fd5756',
                                    },
                                ]),
                            ],
                        ],
                        width: 10, // 表盘宽度
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                detail: {
                    show: false,
                },
            },
            {
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中
                radius: '50px',
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                    show: true,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            [1, '#ffe8ec'], // 90%-100%处的颜色
                        ],
                        width: 30, // 表盘宽度
                    },
                },
                splitLine: {
                    distance: -10,
                    // 分割线样式（及10、20等长线样式）
                    length: 7,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#fd5756',
                    },
                },
                axisTick: {
                    splitNumber: 8,
                    distance: -10,
                    // 刻度线样式（及短线样式）
                    length: 7,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#fd5756',
                    },
                },
                axisLabel: {
                    // 文字样式（及“10”、“20”等文字样式）
                    // color: '#b8efff',
                    // distance: 0 //文字离表盘的距离
                    show: false,
                },
                detail: {
                    show: false,
                },
            },
            {
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中
                radius: '40px',
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                    show: true,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            [1, '#FF393A'], // 90%-100%处的颜色
                        ],
                        width: 2, // 表盘宽度
                    },
                },
                splitLine: {
                    distance: 15,
                    // 分割线样式（及10、20等长线样式）
                    length: 10,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#fd5756',
                    },
                },
                axisTick: {
                    splitNumber: 4,
                    distance: 15,
                    // 刻度线样式（及短线样式）
                    length: 5,
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 1,
                        color: '#fd5756',
                    },
                },
                axisLabel: {
                    // 文字样式（及“10”、“20”等文字样式）
                    color: 'rgba(0,0,0,.65)',
                    fontSize: 7,
                    distance: 3, // 文字离表盘的距离
                    // show: false
                },
                progress: {
                    show: true,
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                        borderWidth: 10,
                    },
                },
                pointer: {
                    width: 3, // 指针的宽度
                    length: '50%', // 指针长度，按照半圆半径的百分比
                    shadowColor: '#FF5858', // 默认透明
                    shadowBlur: 30,
                    itemStyle: {
                        color: '#FF5858',
                    },
                },
                itemStyle: {
                    // 渐变颜色
                    color: new echarts.graphic.LinearGradient(1, 1, 0, 1, [
                        {
                            offset: 1,
                            color: '#fd5756',
                        },
                        {
                            offset: 0,
                            color: '#d80201',
                        },
                    ]),
                    shadowColor: '#ffc3c7', // 默认透明
                    shadowBlur: 30,
                },
                title: {
                    offsetCenter: [0, '70%'],
                    fontSize: 16,
                },
                detail: {
                    // formatter: function(value) {
                    //     return this.prohibitTotalAmount + '(' + value + '%)';
                    // },
                    formatter: function(value) {
                        return '(' + value + '%)';
                    },
                    offsetCenter: [0, '145%'],
                    height: 5,
                    color: 'rgba(0,0,0,.65)',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
                markPoint: {
                    // symbol:'circle',
                    // symbolSize:15,
                    // itemStyle: {
                    //     color: "#fff"
                    // },
                    data: [
                        {
                            x: '50%',
                            y: '50%',
                            symbol: 'circle',
                            symbolSize: 12,
                            itemStyle: {
                                color: ' #FF5858',
                            },
                        },
                        {
                            x: '50%',
                            y: '50%',
                            symbol: 'circle',
                            symbolSize: 8,
                            itemStyle: {
                                color: '#fff',
                            },
                        },
                    ],
                },
                data: [
                    {
                        value: 0,
                        // name: '送审',
                        itemStyle: {
                            color: '#FF5858',
                        },
                    },
                ],
            },
        ],
    };
    totalBalance: string = ''; // 总金额
    totalInst: string = ''; // 总笔数
    TimeSendMessage: any = null;
    OrderDirection: any = {};
    chartInstance: any = null;
    chartInstanceArr: any[] = [];
    chartComponent: string[] = [
        'PieChart',
        'PiesChart',
        'CirqueChart',
        'instPie1',
        'instPie2',
        'SolidBarChart',
        'CirqueChart1',
        'CirqueChart2',
        'LineChart',
        'BarChart',
    ];
    Timer: any = null;
    timing: any = null; // 1分钟定时器
    shortTimer: any = null; // 5-10分钟定时器
    longTimer: any = null; // 半天定时器
    frequency: number = 60000; // 1分钟刷新频率

    private tableLoading: boolean = false;

    async mounted() {
        // 实时监控
        this.handleDrawCharts('monitorTop1', this.chartDomMonitor, this.myChartMonitor, this.monitorOption1);
        this.handleDrawCharts('monitorTop2', this.chartDomMonitor, this.myChartMonitor, this.monitorOption2);
        this.handleDrawCharts('monitorTop3', this.chartDomMonitor, this.myChartMonitor, this.monitorOption3);

        // 获取产品分布
        this.queryFundDistribution();
        // 获取指令分布--产品类型
        this.queryInstDistributionFundType();
        // 获取指令分布--指令类型
        this.queryInstDistribution();
        // 触警分布
        this.queryThresholdDistribution();
        // 静态计算分布
        this.queryStaticDistribution();
        // 连续触警
        this.queryContinuousTriggerWarning();
        // 连续违规
        this.queryContinuousBreakRule();
        // 旁路动态信息
        this.queryBypass();
        // 实时触警走势
        this.queryRealTimeThreshold();
        // 静态触警分组
        this.queryStaticGradeGroup();
        // 实时监控
        this.queryrealTimeMonitor();
        this.setT();
        // 委托方向
        this.OrderDirection = DictionConstUtil.ListToPojo(await DictionConstUtil.FNTradeDirection());
        this.chartComponent.forEach(ele => {
            this.chartInstanceArr.push((this.$refs[ele] as any).chartInstance);
        });
        window.addEventListener('resize', this.screenAdapter);
    }

    screenAdapter() {
        setTimeout(() => {
            const titleFontSize = ((this.$refs.PieChart as any).offsetWidth / 100) * 5.6;
            // 分辨率变化图表配置
            const adapterOption = {
                axisLabel: {
                    textStyle: {
                        fontSize: titleFontSize,
                    },
                },
            };
            this.chartInstanceArr.forEach(ele => {
                ele.setOption(adapterOption);
                ele.resize();
            });
        }, 200);
    }

    // 设置定时器
    // setT() {
    //     this.TimeSendMessage = setInterval(async () => {
    //         // 触警分布
    //         this.queryThresholdDistribution();
    //         // 实时监控
    //         this.queryrealTimeMonitor();
    //         // 实时触警走势
    //         this.queryRealTimeThreshold();
    //     }, 60000);
    // }

    // 实时模块设置定时器1分钟刷一次
    setT() {
        let funcArr = [this.queryThresholdDistribution, this.queryRealTimeThreshold, this.queryrealTimeMonitor];
        this.Timer = setInterval(() => {
            for (let index = 0; index < funcArr.length; index++) {
                (function(t) {
                    setTimeout(function() {
                        funcArr[index]('autoRefresh');
                    }, 200 * t); // 还是每200ms执行一次，不是累加的
                })(index);
            }
        }, this.frequency);
    }

    // 5-10分钟刷新指令分布和旁路动态信息
    setShortTimer() {
        let funcArr = [this.queryInstDistributionFundType, this.queryInstDistribution, this.queryBypass];
        this.shortTimer = setInterval(() => {
            for (let index = 0; index < funcArr.length; index++) {
                (function(t) {
                    setTimeout(function() {
                        funcArr[index]('autoRefresh');
                    }, 200 * t);
                })(index);
            }
        }, 60000 * Math.round(Math.random() * 5 + 5));
    }

    // 产品半天刷新一次
    setLongTimer() {
        this.longTimer = setInterval(() => {
            this.queryFundDistribution('autoRefresh');
        }, 60000 * 60 * 12);
    }

    // 手动刷新时间
    handleRefresh(type: string) {
        switch (type) {
            case '1':
                // 获取产品分布
                this.fundDistributionData = {
                    data: [],
                    showLegend: true,
                    tooltip: {
                        formatter: function(param) {
                            return param.marker + '&nbsp' + param.name + '&nbsp' + (thousandsFormat(param.value) || '0') + '只';
                        },
                    },
                    color: ['#5FB2FF', '#73E0FF', '#96A0FF', '#F47B8F'],
                };
                this.queryFundDistribution();
                break;
            case '2':
                this.$refs['PiesChart'].dispose();
                // 触警分布
                this.queryThresholdDistribution();
                break;
            case '3':
                this.staticDistributionData.data = [];
                // 静态计算分布
                this.queryStaticDistribution();
                break;
            case '4':
                // this.instDistributionData.data = [];
                // this.instDistributionByFundData.data = [];
                this.$refs['instPie1'].dispose();
                this.$refs['instPie2'].dispose();
                // 获取指令分布--产品类型
                this.queryInstDistributionFundType();
                // 获取指令分布--指令类型
                this.queryInstDistribution();
                break;
            case '5':
                echarts.init(document.getElementById('monitorTop1')).clear();
                echarts.init(document.getElementById('monitorTop2')).clear();
                echarts.init(document.getElementById('monitorTop3')).clear();
                this.monitorOption1.series[2].detail = {
                    show: false,
                    formatter: function(value) {
                        return '(' + value + '%)';
                    },
                    offsetCenter: [0, '145%'],
                    height: 5,
                    color: 'rgba(0,0,0,.65)',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                };
                this.monitorOption2.series[2].detail = {
                    show: false,
                    formatter: function(value) {
                        return '(' + value + '%)';
                    },
                    offsetCenter: [0, '145%'],
                    height: 5,
                    color: 'rgba(0,0,0,.65)',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                };
                this.monitorOption3.series[2].detail = {
                    show: false,
                    formatter: function(value) {
                        return '(' + value + '%)';
                    },
                    offsetCenter: [0, '145%'],
                    height: 5,
                    color: 'rgba(0,0,0,.65)',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                };

                this.handleDrawCharts('monitorTop1', this.chartDomMonitor, this.myChartMonitor, this.monitorOption1);
                this.handleDrawCharts('monitorTop2', this.chartDomMonitor, this.myChartMonitor, this.monitorOption2);
                this.handleDrawCharts('monitorTop3', this.chartDomMonitor, this.myChartMonitor, this.monitorOption3);
                // this.$refs['SolidBarChart'].dispose();

                // this.realTimeMonitorBarData.data = [];
                // this.realTimeMonitorBarData.xAxisData = [];
                // 实时监控
                this.queryrealTimeMonitor();
                break;
            case '6':
                this.continuousTriggerWarningData.data = [];
                this.continuousBreakRuleData.data = [];
                // 连续触警
                this.queryContinuousTriggerWarning();
                // 连续违规
                this.queryContinuousBreakRule();
                break;
            case '7':
                // 连续违规
                // this.queryContinuousBreakRule();
                break;
            case '8':
                // 旁路动态信息
                this.tableLoading = true;
                this.queryBypass();
                break;
            case '9':
                this.realTimeThresholdData.data = [];
                this.realTimeThresholdData.xAxisData = [];
                // 实时触警走势
                this.queryRealTimeThreshold();
                break;
            case '10':
                this.staticGradeGroupData.data = [];
                this.staticGradeGroupData.xAxisData = [];
                // 静态触警分组
                this.queryStaticGradeGroup();
                break;
        }
    }

    // 获取产品分布
    queryFundDistribution(operateType?: string) {
        getFundDistribution(operateType)
            .then(res => {
                let _this = this;
                let data = res.pieChartList;
                const swapArrayLocs = (arr, index1, index2) => {
                    [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
                };
                swapArrayLocs(data, 1, 3);
                data.forEach(element => {
                    element.proportion = ((element.value / res.total) * 100 || 0).toFixed(2);
                });
                this.fundDistributionData.data = data;

                this.fundDistributionData.hasData = this.handleChartData(this.fundDistributionData.data);
                this.fundDistributionData.legend = {
                    formatter: function(name) {
                        let data = _this.fundDistributionData.data.find(item => item.name === name);
                        return echarts.format.truncateText(
                            // name + ' ' + (thousandsFormat(data?.value) || '0') + '只',
                            name,
                            100,
                            '12px Microsoft Yahei',
                            '…'
                        );
                    },
                    tooltip: {
                        formatter: function(param) {
                            let data = _this.fundDistributionData.data.find(item => item.name === param.name);

                            return data?.name + '&nbsp&nbsp' + data?.proportion + '%' + '&nbsp&nbsp' + (thousandsFormat(data?.value) || '0') + '只';
                        },
                    },
                };
                this.fundDistributionData.tooltip = {
                    formatter: function(param) {
                        let data = _this.fundDistributionData.data.find(item => item.name === param.name);
                        return (
                            param.marker +
                            '&nbsp' +
                            data?.name +
                            '&nbsp&nbsp' +
                            data?.proportion +
                            '%' +
                            '&nbsp&nbsp' +
                            (thousandsFormat(data?.value) || '0') +
                            '只'
                        );
                    },
                };
                this.totalAmount = res.total;
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    // 获取指令分布--产品类型
    queryInstDistributionFundType(operateType?: string) {
        getInstDistributionFundType(operateType)
            .then(res => {
                let _this = this;
                let data = res.instructionPieChartList;
                const swapArrayLocs = (arr, index1, index2) => {
                    [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
                };
                swapArrayLocs(data, 1, 3);
                this.instDistributionByFundData.data = data;
                this.instDistributionByFundData.hasData = this.handleChartData(this.instDistributionByFundData.data);
                this.instDistributionByFundData.legend = {
                    formatter: function(name) {
                        let data = _this.instDistributionByFundData.data.find(item => item.name === name);
                        return echarts.format.truncateText(
                            // name + ' ' + (thousandsFormat(data?.instructionNum) || '0') + '笔' + ' ' + (thousandsFormat(data?.formatValue) || ''),
                            name,
                            100,
                            '12px Microsoft Yahei',
                            '…'
                        );
                    },
                    tooltip: {
                        formatter: function(param) {
                            let data = _this.instDistributionByFundData.data.find(item => item.name === param.name);

                            return (
                                // param.marker +
                                // '&nbsp' +
                                data.name +
                                '&nbsp' +
                                (thousandsFormat(data?.instructionNum) || '0') +
                                '笔' +
                                '&nbsp' +
                                (thousandsFormat(data?.formatValue) || '')
                            );
                        },
                    },
                };
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    // 获取指令分布--指令类型
    queryInstDistribution(operateType?: string) {
        getInstDistributionType(operateType)
            .then(res => {
                let _this = this;
                this.instDistributionData.data = res.instructionPieChartList;
                this.instDistributionData.hasData = this.handleChartData(this.instDistributionData.data);
                this.instDistributionData.legend = {
                    formatter: function(name) {
                        let data = _this.instDistributionData.data.find(item => item.name === name);
                        return echarts.format.truncateText(
                            // name + ' ' + (thousandsFormat(data?.instructionNum) || '0') + '笔' + ' ' + (thousandsFormat(data?.formatValue) || ''),
                            name,
                            100,
                            '12px Microsoft Yahei',
                            '…'
                        );
                    },
                    tooltip: {
                        formatter: function(param) {
                            let data = _this.instDistributionData.data.find(item => item.name === param.name);
                            return (
                                data.name +
                                '&nbsp' +
                                (thousandsFormat(data?.instructionNum) || '0') +
                                '笔' +
                                '&nbsp' +
                                (thousandsFormat(data?.formatValue) || '')
                            );
                        },
                    },
                };
                this.totalBalance = res.instBalance;
                this.totalInst = res.total;
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    // 触警分布
    queryThresholdDistribution(operateType?: string) {
        getThresholdDistribution(operateType)
            .then(res => {
                let thresholdData = [];
                // 条目总数
                if (res.entryList && res.entryList.length) {
                    res.entryList.forEach(element => {
                        element.proportion = ((element.value / res.entryTotal.value) * 100 || 0).toFixed(2);
                    });
                    this.thresholdAll.data = res.entryList;
                }
                thresholdData.push(this.thresholdAll);
                this.entryTotal = res.entryTotal;
                // 警告
                if (res.warningList && res.warningList.length) {
                    res.warningList.forEach(element => {
                        element.proportion = ((element.value / res.warningTotal.value) * 100 || 0).toFixed(2);
                    });
                    // this.thresholdWarning.noData = this.handleChartData(res.warningList);
                    this.thresholdWarning.data = res.warningList;
                }
                thresholdData.push(this.thresholdWarning);
                this.warningTotal = res.warningTotal;
                // 送审
                if (res.examineList && res.examineList.length) {
                    res.examineList.forEach(element => {
                        element.proportion = ((element.value / res.examineTotal.value) * 100 || 0).toFixed(2);
                    });
                    // this.thresholdUnderReview.noData = this.handleChartData(res.examineList);
                    this.thresholdUnderReview.data = res.examineList;
                }
                thresholdData.push(this.thresholdUnderReview);
                this.examineTotal = res.examineTotal;
                // 禁止
                if (res.prohibitList && res.prohibitList.length) {
                    res.prohibitList.forEach(element => {
                        element.proportion = ((element.value / res.prohibitTotal.value) * 100 || 0).toFixed(2);
                    });
                    // this.handleChartData(res.prohibitList);
                    this.thresholdForbid.data = res.prohibitList;
                }

                thresholdData.push(this.thresholdForbid);
                this.prohibitTotal = res.prohibitTotal;

                this.thresholdData.data = thresholdData;
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    openFakeAnimation() {
        this.fakeAnimation = setInterval(() => {
            let num = Math.round(Math.random() * 99) + 1;
            this.monitorOption1.series[2].data = [{ value: num, name: '' }];
            this.monitorOption1.series[2].detail = { show: false };
            this.monitorOption2.series[2].data = [{ value: num, name: '' }];
            this.monitorOption2.series[2].detail = { show: false };
            this.monitorOption3.series[2].data = [{ value: num, name: '' }];
            this.monitorOption3.series[2].detail = { show: false };
            NumAutoPlusAnimation('test', { time: 1020, num: num, regulator: 50 });
            this.handleDrawCharts('monitorTop1', this.chartDomMonitor, this.myChartMonitor, this.monitorOption1);
            this.handleDrawCharts('monitorTop2', this.chartDomMonitor, this.myChartMonitor, this.monitorOption2);
            this.handleDrawCharts('monitorTop3', this.chartDomMonitor, this.myChartMonitor, this.monitorOption3);
        }, 1020);
    }
    openFakeAnimation2() {
        this.fakeAnimation2 = setInterval(() => {
            let num = Math.round(Math.random() * 99) + 1;

            this.monitorOption1.series[2].data = [{ value: num, name: '' }];
            this.monitorOption1.series[2].detail = { show: false };
            this.monitorOption2.series[2].data = [{ value: num, name: '' }];
            this.monitorOption2.series[2].detail = { show: false };
            this.monitorOption3.series[2].data = [{ value: num, name: '' }];
            this.monitorOption3.series[2].detail = { show: false };

            NumAutoPlusAnimation('fake-num1', { time: 1020, num: num, regulator: 50 });
            NumAutoPlusAnimation('fake-num2', { time: 1020, num: num, regulator: 50 });
            NumAutoPlusAnimation('fake-num3', { time: 1020, num: num, regulator: 50 });

            this.handleDrawCharts('monitorTop1', this.chartDomMonitor, this.myChartMonitor, this.monitorOption1);
            this.handleDrawCharts('monitorTop2', this.chartDomMonitor, this.myChartMonitor, this.monitorOption2);
            this.handleDrawCharts('monitorTop3', this.chartDomMonitor, this.myChartMonitor, this.monitorOption3);
        }, 1020);
    }
    handleChartData(data: any) {
        data.forEach(ele => {
            // 图表数据项为0处理
            if (ele.value === '0') {
                this.$set(ele, 'value', '');
            }
        });
        let realData = data.find(ele => ele.value);
        if (realData) {
            return true;
        } else {
            data.push({ name: '', value: '0', value1: '', itemStyle: { color: '#60b2fd' } });
            return false;
        }
    }

    getsum(arr) {
        return arr.reduce((prev, curr) => prev + curr);
    }

    // 静态计算分布
    queryStaticDistribution() {
        getStaticDistribution()
            .then(res => {
                let _this = this;
                let arr = res.filter(item => item.value !== '0');
                if (arr.length === 1) {
                    res.forEach(element => {
                        element.itemStyle = { borderWidth: 0 };
                    });
                }

                this.staticDistributionData.data = res;

                let sum = this.getsum(res.map(item => Number(item.value)));
                this.staticDistributionData.legend = {
                    formatter: name => {
                        let info = res.find(ele => ele.name == name);
                        let value = info?.value;
                        let showText = ['{a|' + name + '}' + '{b|' + thousandsFormat(value) + '}' + '条'];
                        return showText;
                    },
                    tooltip: {
                        formatter: function(param) {
                            let data = _this.staticDistributionData.data.find(item => item.name === param.name);
                            return (
                                data?.name +
                                '&nbsp&nbsp' +
                                ((data?.value / sum) * 100 || 0).toFixed(2) +
                                '%' +
                                '&nbsp&nbsp' +
                                (thousandsFormat(data?.value) || '0') +
                                '条'
                            );
                        },
                    },
                    textStyle: {
                        rich: {
                            a: {
                                fontSize: 12,
                                width: 30,
                            },
                        },
                    },
                };
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    // 连续触警
    queryContinuousTriggerWarning() {
        getContinuousTriggerWarning()
            .then(res => {
                let _this = this;
                res.forEach(element => {
                    element.label = { show: false };
                    element.labelLine = { show: false };
                });

                let arr = res.filter(item => item.value !== '0');
                if (arr.length === 1) {
                    res.forEach(element => {
                        element.itemStyle = { borderWidth: 0 };
                    });
                }

                this.continuousTriggerWarningData.data = res;

                let sum = this.getsum(res.map(item => Number(item.value)));
                this.continuousTriggerWarningData.legend = {
                    formatter: name => {
                        let info = res.find(ele => ele.name == name);
                        let value = info?.value;
                        let showText = ['{a|' + name + '}' + '{b|' + thousandsFormat(value) + '}' + '条'];
                        return showText;
                    },
                    tooltip: {
                        formatter: function(param) {
                            let data = _this.continuousTriggerWarningData.data.find(item => item.name === param.name);
                            return (
                                data?.name +
                                '&nbsp&nbsp' +
                                ((data?.value / sum) * 100 || 0).toFixed(2) +
                                '%' +
                                '&nbsp&nbsp' +
                                (thousandsFormat(data?.value) || '0') +
                                '条'
                            );
                        },
                    },
                };
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    // 连续违规
    queryContinuousBreakRule() {
        getContinuousBreakRule()
            .then(res => {
                let _this = this;
                res.forEach(element => {
                    element.label = { show: false };
                    element.labelLine = { show: false };
                });

                let arr = res.filter(item => item.value !== '0');
                if (arr.length === 1) {
                    res.forEach(element => {
                        element.itemStyle = { borderWidth: 0 };
                    });
                }
                let sum = this.getsum(res.map(item => Number(item.value)));
                this.continuousBreakRuleData.data = res;
                this.continuousBreakRuleData.legend = {
                    formatter: name => {
                        let info = res.find(ele => ele.name == name);
                        let value = info?.value;
                        let showText = ['{a|' + name + '}' + '{b|' + thousandsFormat(value) + '}' + '条'];
                        return showText;
                    },
                    tooltip: {
                        formatter: function(param) {
                            let data = _this.continuousBreakRuleData.data.find(item => item.name === param.name);
                            return (
                                data?.name +
                                '&nbsp&nbsp' +
                                ((data?.value / sum) * 100 || 0).toFixed(2) +
                                '%' +
                                '&nbsp&nbsp' +
                                (thousandsFormat(data?.value) || '0') +
                                '条'
                            );
                        },
                    },
                };
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    // 实时监控
    queryrealTimeMonitor(operateType?: string) {
        if (this.disFreshType) {
            return;
        }
        getRealTimeMonitor(operateType)
            .then(res => {
                // 柱状图数据
                // let res = {
                //     entryTypeChart: {
                //         data: [
                //             {
                //                 data: [2, 43, 0, 0],
                //                 name: '送审',
                //             },
                //             {
                //                 data: [400, 448, 42, 0],
                //                 name: '警告',
                //             },
                //             {
                //                 data: [110, 579, 579, 0],
                //                 name: '禁止',
                //             },
                //         ],
                //         xData: ['法律法规', '公司规定', '契约规定', '其他规定'],
                //     },
                //     examineTotal: {
                //         name: '送审总数',
                //         value: '2.75',
                //         value1: '45',
                //     },
                //     prohibitTotal: {
                //         name: '禁止总数',
                //         value: '42.92',
                //         value1: '703',
                //     },
                //     runState: '0',
                //     startDate: 20221013,
                //     startTime: 170017,
                //     thresholdTotal: 1638,
                //     timeComplete: 170249,
                //     warningTotal: {
                //         name: '警告总数',
                //         value: '54.33',
                //         value1: '890',
                //     },
                // };
                let data = res.entryTypeChart?.data;
                this.thresholdTotal = res.thresholdTotal || 0;
                if (data && data.length) {
                    const swapArrayLocs = (arr, index1, index2) => {
                        [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
                    };
                    swapArrayLocs(data, 0, 1);
                    data = data.map(item => {
                        return { ...item, type: 'bar' };
                    });
                    data.forEach((ele, index) => {
                        data.push({ data: ele.data, name: index, type: 'pictorialBar' }, { data: ele.data, name: index, type: 'pictorialBar' });
                    });
                    this.realTimeMonitorBarData.data = data;
                }

                this.realTimeMonitorBarData.xAxisData = res.entryTypeChart?.xData;
                this.monitorState = res.runState;
                this.startTime = timeFormat(res.startTime);
                this.nowTime = moment().format('HH:mm:ss'); // 获取当前时间
                // res.runState = '1'; // 测试
                if (res.runState !== undefined) {
                    if (res.runState === '0') {
                        // 清除定时器
                        clearInterval(this.timing);
                        if (this.timing) {
                            // clearInterval(this.fakeAnimation2);
                            // this.fakeAnimation2 = null;
                        }
                        // 计算完成
                        this.endTime = timeFormat(res?.timeComplete);
                        // setTimeout(() => {
                        //     this.endTime = timeFormat(res?.timeComplete);
                        // }, 5000);
                        this.totalTime = this.$moment(timeFormat(this.endTime), 'hh:mm:ss').diff(this.$moment(this.startTime, 'hh:mm:ss'), 'seconds');
                        // NumAutoPlusAnimation2('fake-time', { time: 5000, num: this.totalTime, regulator: 50 });
                    } else {
                        // 计算中
                        this.endTime = this.nowTime;
                        this.timing = setInterval(() => {
                            this.nowTime = moment().format('HH:mm:ss');
                            this.totalTime = this.$moment(this.nowTime, 'hh:mm:ss').diff(this.$moment(this.startTime, 'hh:mm:ss'), 'seconds');
                        }, 1000);
                    }
                }

                // setTimeout(() => {
                let that = this;
                // 蓝色仪表盘
                if (res?.examineTotal) {
                    this.monitorOption1.series[2].data = [{ ...res?.examineTotal, name: '' }];
                    this.examineTotalAmount = res.examineTotal.value1;
                    this.monitorOption1.series[2].detail = {
                        show: false,
                        formatter: function(value) {
                            return thousandsFormat(that.examineTotalAmount) + '(' + value + '%)';
                        },
                        valueAnimation: true,
                    };
                    this.hiddenFakeSpan = false;
                    this.getFakeFlash(this.thresholdTotal, this.examineTotalAmount, 'fake-num1', '1', this.monitorOption1);
                }
                // 黄色仪表盘
                if (res?.warningTotal) {
                    this.monitorOption2.series[2].data = [{ ...res?.warningTotal, name: '' }];
                    this.warningTotalAmount = res.warningTotal.value1;
                    this.monitorOption2.series[2].detail = {
                        show: false,
                        formatter: function(value) {
                            return thousandsFormat(that.warningTotalAmount) + '(' + value + '%)';
                        },
                        valueAnimation: true,
                    };
                    this.hiddenFakeSpan = false;
                    this.getFakeFlash(this.thresholdTotal, this.warningTotalAmount, 'fake-num2', '2', this.monitorOption2);
                }
                // 红色仪表盘
                if (res?.prohibitTotal) {
                    this.monitorOption3.series[2].data = [{ ...res?.prohibitTotal, name: '' }];
                    this.prohibitTotalAmount = res.prohibitTotal.value1;
                    this.monitorOption3.series[2].detail = {
                        show: false,
                        formatter: function(value) {
                            return thousandsFormat(that.prohibitTotalAmount) + '(' + value + '%)';
                        },
                        valueAnimation: true,
                    };
                    this.hiddenFakeSpan = false;
                    this.getFakeFlash(this.thresholdTotal, this.prohibitTotalAmount, 'fake-num3', '3', this.monitorOption3);
                }

                this.handleDrawCharts('monitorTop1', this.chartDomMonitor, this.myChartMonitor, this.monitorOption1);
                this.handleDrawCharts('monitorTop2', this.chartDomMonitor, this.myChartMonitor, this.monitorOption2);
                this.handleDrawCharts('monitorTop3', this.chartDomMonitor, this.myChartMonitor, this.monitorOption3);

                if (res?.examineTotal) {
                    setTimeout(() => {
                        this.hiddenFakeSpan = true;
                        this.monitorOption1.series[2].detail = { show: true };
                        this.handleDrawCharts('monitorTop1', this.chartDomMonitor, this.myChartMonitor, this.monitorOption1);
                    }, 10000);
                    // this.monitorOption1.series[2].detail = { show: true };
                    // this.handleDrawCharts('monitorTop1', this.chartDomMonitor, this.myChartMonitor, this.monitorOption1);
                }
                if (res?.warningTotal) {
                    setTimeout(() => {
                        this.hiddenFakeSpan = true;
                        this.monitorOption2.series[2].detail = { show: true };
                        this.handleDrawCharts('monitorTop2', this.chartDomMonitor, this.myChartMonitor, this.monitorOption2);
                    }, 10000);
                    // this.monitorOption2.series[2].detail = { show: true };
                    // this.handleDrawCharts('monitorTop2', this.chartDomMonitor, this.myChartMonitor, this.monitorOption2);
                }
                if (res?.prohibitTotal) {
                    setTimeout(() => {
                        this.hiddenFakeSpan = true;
                        this.monitorOption3.series[2].detail = { show: true };
                        this.handleDrawCharts('monitorTop3', this.chartDomMonitor, this.myChartMonitor, this.monitorOption3);
                    }, 10000);
                    // this.monitorOption3.series[2].detail = { show: true };
                    // this.handleDrawCharts('monitorTop3', this.chartDomMonitor, this.myChartMonitor, this.monitorOption3);
                }

                // if (res.runState && res.runState !== '0') {
                //     this.openFakeAnimation();
                // }
                // }, 11000);
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    disFresh(e) {
        this.disFreshType = e;
    }

    // 旁路动态信息
    queryBypass(operateType?: string) {
        getBypass(operateType)
            .then(res => {
                // res.filter(ele => {
                //     ele.realDirection = this.OrderDirection[ele.realDirection];
                // });
                this.bypassMsg.returnData.data = res;
                this.tableLoading = false;
            })
            .catch(err => {
                this.yh_message_error(err);
                this.tableLoading = false;
            });
    }

    // 实时触警走势
    queryRealTimeThreshold(operateType?: string) {
        getRealTimeThreshold(operateType)
            .then(res => {
                if (res.data) {
                    res.data.forEach(item => {
                        item.data.unshift(0);
                    });
                }
                this.realTimeThresholdData.data = res.data.map(item => {
                    return { ...item, type: 'line', smooth: true, showSymbol: false, symbol: 'circle' };
                });
                this.realTimeThresholdData.xAxisData = res.xData.map(item => {
                    return this.timeFormat(item);
                });

                this.realTimeThresholdData.xAxisData = [' ', ...this.realTimeThresholdData.xAxisData];
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    timeFormat(str: string | number, completion?: boolean) {
        if ((!str || str === '0') && !completion) {
            return '';
        }
        let time;
        if (completion && !str) {
            time = '';
        } else {
            time = str.toString();
        }
        if (time.length < 6) {
            const addLen = 6 - time.length;
            for (let i = 0; i < addLen; i++) {
                time = '0' + time;
            }
        }

        return moment(time, 'HHmm').format('HH:mm');
    }

    // 静态触警分组
    queryStaticGradeGroup() {
        getStaticGradeGroup()
            .then(res => {
                // let res = {
                //     data: [
                //         {
                //             data: [0, 0, 0, 0],
                //             name: '送审',
                //         },
                //         {
                //             data: [0, 2000, 0, 0],
                //             name: '警告',
                //         },
                //         {
                //             data: [0, 0, 0, 0],
                //             name: '禁止',
                //         },
                //     ],
                //     xData: ['法律法规', '公司规定', '其他规定', '契约规定'],
                // };
                this.staticGradeGroupData.data = res.data.map(item => {
                    return { ...item, type: 'bar', stack: 'one' };
                });
                this.staticGradeGroupData.xAxisData = res.xData;
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    // 图形绘制
    handleDrawCharts(id: string, chartDom: HTMLElement, chart: any, option: EChartsOption) {
        chartDom = document.getElementById(id);
        chart = echarts.init(chartDom);
        option && chart.setOption(option);
    }

    getFakeFlash(sum, total, id, no, monitorOption) {
        if (total && total !== '0') {
            let s1 = Number((sum * 0.2).toFixed(0)); // 344
            let s2 = Number((sum * 0.4).toFixed(0)); // 688
            let s3 = Number((sum * 0.6).toFixed(0)); // 1032
            let s4 = Number((sum * 0.8).toFixed(0)); // 1376
            let s5 = Number((sum * 1).toFixed(0)); // 1720
            let total1 = Number((total / 5).toFixed(0)); // 每个数据量第1秒
            // 1 不能比totol大
            // 2 不能比s1大
            // 3 3个total1加起来等于s1
            let total2 = Number((total / 5).toFixed(0)) * 2; // 每个数据量
            // 1 不能比totol大
            // 2 不能比s2大
            // 3 3个total2加起来等于s2
            // 4 不能比total1小
            let total3 = Number((total / 5).toFixed(0)) * 3; // 每个数据量
            let total4 = Number((total / 5).toFixed(0)) * 4; // 每个数据量
            let total5 = Number((total / 5).toFixed(0)) * 5; // 每个数据量 867
            let percentum1 = ((total1 / s1) * 100).toFixed(0);
            let percentum2 = ((total2 / s2) * 100).toFixed(0);
            let percentum3 = ((total3 / s3) * 100).toFixed(0);
            let percentum4 = ((total4 / s4) * 100).toFixed(0);
            let percentum5 = ((total5 / s5) * 100).toFixed(0);
            console.log('第1秒：', '总条目数', s1, '数据量', total1, '占比', percentum1);
            console.log('第2秒：', '总条目数', s2, '数据量', total2, '占比', percentum2);
            console.log('第3秒：', '总条目数', s3, '数据量', total3, '占比', percentum3);
            console.log('第4秒：', '总条目数', s4, '数据量', total4, '占比', percentum4);
            console.log('第5秒：', '总条目数', s5, '数据量', total5, '占比', percentum5);

            NumAutoPlusAnimation(id, { time: 2000, num: total1, regulator: 50, count: 0 });
            NumAutoPlusAnimation(id + '-p', { time: 2000, num: percentum1, regulator: 50, count: 0, count2: 0, percentum: true });
            // monitorOption.series[2].data = [{ value: percentum1, value1: total1, name: '' }];
            // this.handleDrawCharts('monitorTop' + no, this.chartDomMonitor, this.myChartMonitor, monitorOption);

            setTimeout(() => {
                NumAutoPlusAnimation(id, { time: 2000, num: total2, regulator: 50, count: total1 });
                NumAutoPlusAnimation(id + '-p', {
                    time: 2000,
                    num: percentum2,
                    regulator: 50,
                    count: 0,
                    count2: percentum1,
                    percentum: true,
                });
                // monitorOption.series[2].data = [{ value: '0', value1: total2, name: '' }];
                // this.handleDrawCharts('monitorTop' + no, this.chartDomMonitor, this.myChartMonitor, monitorOption);
                // setTimeout(() => {
                // monitorOption.series[2].data = [{ value: percentum2, value1: total2, name: '' }];
                // this.handleDrawCharts('monitorTop' + no, this.chartDomMonitor, this.myChartMonitor, monitorOption);
                // }, 300);
            }, 2000);

            setTimeout(() => {
                NumAutoPlusAnimation(id, { time: 2000, num: total3, regulator: 50, count: total2 });
                NumAutoPlusAnimation(id + '-p', {
                    time: 2000,
                    num: percentum3,
                    regulator: 50,
                    count: 0,
                    count2: percentum2,
                    percentum: true,
                });
                // monitorOption.series[2].data = [{ value: '0', value1: total3, name: '' }];
                // this.handleDrawCharts('monitorTop' + no, this.chartDomMonitor, this.myChartMonitor, monitorOption);
                // setTimeout(() => {
                // monitorOption.series[2].data = [{ value: percentum3, value1: total3, name: '' }];
                // this.handleDrawCharts('monitorTop' + no, this.chartDomMonitor, this.myChartMonitor, monitorOption);
                // }, 300);
            }, 4000);

            setTimeout(() => {
                NumAutoPlusAnimation(id, { time: 3000, num: total4, regulator: 50, count: total3 });
                NumAutoPlusAnimation(id + '-p', {
                    time: 3000,
                    num: percentum4,
                    regulator: 50,
                    count: 0,
                    count2: percentum3,
                    percentum: true,
                });
                // monitorOption.series[2].data = [{ value: 0, value1: total4, name: '' }];
                // this.handleDrawCharts('monitorTop' + no, this.chartDomMonitor, this.myChartMonitor, monitorOption);
                // setTimeout(() => {
                // monitorOption.series[2].data = [{ value: percentum4, value1: total4, name: '' }];
                // this.handleDrawCharts('monitorTop' + no, this.chartDomMonitor, this.myChartMonitor, monitorOption);
                // }, 300);
            }, 7000);

            setTimeout(() => {
                NumAutoPlusAnimation(id, { time: 1000, num: total5, regulator: 50, count: total4 });
                NumAutoPlusAnimation(id + '-p', {
                    time: 1000,
                    num: percentum5,
                    regulator: 50,
                    count: 0,
                    count2: percentum4,
                    percentum: true,
                });
                // monitorOption.series[2].data = [{ value: '0', value1: total5, name: '' }];
                // this.handleDrawCharts('monitorTop' + no, this.chartDomMonitor, this.myChartMonitor, monitorOption);
                // setTimeout(() => {
                // monitorOption.series[2].data = [{ value: percentum5, value1: total5, name: '' }];
                // this.handleDrawCharts('monitorTop' + no, this.chartDomMonitor, this.myChartMonitor, monitorOption);
                // }, 300);
            }, 8000);
        } else {
            monitorOption.series[2].detail = { show: true };
        }
    }

    beforeDestroy() {
        if (this.Timer) {
            clearInterval(this.Timer);
            this.Timer = null;
        }
        if (this.shortTimer) {
            clearInterval(this.shortTimer);
            this.shortTimer = null;
        }
        if (this.longTimer) {
            clearInterval(this.longTimer);
            this.longTimer = null;
        }
        if (this.fakeAnimation) {
            clearInterval(this.fakeAnimation);
            this.fakeAnimation = null;
        }
        if (this.fakeAnimation2) {
            clearInterval(this.fakeAnimation2);
            this.fakeAnimation2 = null;
        }
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/monitor-display';
.display-content {
    width: 100%;
    min-width: 1200px;
    .header {
        width: 1169px;
        height: 60px;
        // img {
        //     width: 100%;
        //     height: 60px;
        // }
        background-image: url('./images/title.png');
        background-size: 100%;
        .title {
            font-size: 24px;
            // font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #107fff;
            line-height: 33px;
            letter-spacing: 20px;
            text-align: center;
            height: 100%;
            line-height: 60px;
        }
    }
    .content {
        .el-row {
            min-width: 1200px;
            margin-bottom: 10px;
            .el-col {
                height: 100%;
            }
        }
        .row1 {
            min-height: 210px;
            height: 25vh;
        }
        .row2 {
            min-height: 400px;
            height: 45vh;
            #monitorTop {
                min-height: 180px;
                position: relative;

                #fake-box1 {
                    position: absolute;
                    z-index: 18;
                    bottom: 23.5px;
                    left: 81.5px;
                    width: 68px;
                    text-align: center;
                    span {
                        font-size: 12px;
                        color: rgba(0, 0, 0, 0.65);
                        font-weight: 350;
                    }
                }

                // #fake-num1-p {
                //     position: absolute;
                //     z-index: 18;
                //     bottom: 23px;
                //     left: 103px;
                //     font-size: 12px;
                //     color: rgba(0, 0, 0, 0.65);
                //     font-weight: normal;
                // }

                #fake-box2 {
                    position: absolute;
                    z-index: 18;
                    bottom: 23.5px;
                    left: 252.5px;
                    width: 68px;
                    text-align: center;
                    span {
                        font-size: 12px;
                        color: rgba(0, 0, 0, 0.65);
                        font-weight: 350;
                    }
                }

                // #fake-num2-p {
                //     position: absolute;
                //     z-index: 18;
                //     bottom: 23px;
                //     left: 300px;
                //     font-size: 12px;
                //     color: rgba(0, 0, 0, 0.65);
                //     font-weight: normal;
                // }

                #fake-box3 {
                    position: absolute;
                    z-index: 18;
                    bottom: 23.5px;
                    left: 423.5px;
                    width: 68px;
                    text-align: center;
                    span {
                        font-size: 12px;
                        color: rgba(0, 0, 0, 0.65);
                        font-weight: 350;
                    }
                }

                // #fake-num3-p {
                //     position: absolute;
                //     z-index: 18;
                //     bottom: 23px;
                //     left: 439px;
                //     font-size: 12px;
                //     color: rgba(0, 0, 0, 0.65);
                //     font-weight: normal;
                // }
            }
        }

        .box-card {
            height: 100%;
            margin: 5px 5px 5px 4px;

            // #alertPie {
            .alertPieTitle {
                text-align: center;
                margin-top: -15px;
                margin-left: 5px;
                color: rgba(0, 0, 0, 0.65);
                width: 25%;
                font-size: 12px;
                font-weight: 700;
            }
            // }
            .text {
                padding: 17px 5px 5px 11px;
                font-size: 15px;
                font-weight: bold;
                display: flex;
                .imgStyle {
                    height: 20px;
                    width: 20px;
                    margin-right: 5px;
                    background-repeat: no-repeat;
                    background-size: 20px 20px;
                }
                .pieImg {
                    background-image: url('./images/pie.png');
                }
                .lineImg {
                    background-image: url('./images/line.png');
                }
                .messageImg {
                    background-image: url('./images/message.png');
                }
                .barImg {
                    background-image: url('./images/bar.png');
                }
                .dashboardImg {
                    background-image: url('./images/dashboard.png');
                }

                span {
                    line-height: 16px;
                }
                .icon {
                    font-size: 18px;
                    font-weight: 600;
                    color: #8db5db;
                    // flex: 1;
                    text-align: right;
                    cursor: pointer;
                    &:hover {
                        color: #3aa0ff;
                    }
                }
            }
            .blue-box {
                position: relative;
                .faker-border {
                    // position: absolute;
                    float: right;
                    display: inline-block;
                    height: 22px;
                    width: 2px;
                    background: #e9e9e9;
                    margin: 5px 14px 0 5px;
                    // right: 57px;
                    // top: -12px;
                }
            }
            .blue-font {
                float: right;
                font-size: 12px;
                font-weight: bold;
                padding-right: 18px;
                color: #107fff;
                margin-top: -2px;
            }
        }
    }
}

/deep/.el-card__body {
    padding: 0px;
    height: 100%;
    width: 100%;
}
.alertPie {
    width: 25%;
    height: 90%;
}

.subText-box {
    line-height: 12px;
    padding-left: 5px;
    .subText {
        padding: 10px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
    }
}
</style>
<style>
.el-tooltip__popper {
    margin: 5px !important;
}

.monitor-tooltip {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.65);
    border-width: 0px;
    padding: 5px 10px;
}

.monitor-tooltip .popper__arrow {
    display: none;
}
</style>
